<template>
  <div class="reward">
    <el-dialog title="打赏" class='reward-dialog' :visible.sync="isShow" center :before-close="close" append-to-body>
      <el-form :model="form" :rules="rules" ref="ruleForm" label-position="top" label-width="120px">
        <el-form-item label="打赏金额" prop="money">
          <el-input v-model="form.money" placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="getRandomMoney" class='fr'>随机金额</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">打赏</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      form: {
        money: ''
      },
      rules: {
        money: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error(`请输入金额`));
              } else {
                if (!Number(value)) {
                  callback(new Error(`请输入正确的金额`));
                } else {
                  callback()
                }
              }
            },
            trigger: 'change' }
        ]

      },
      moneys: [
        1.68,
        1.88,
        1.98,
        2.68,
        2.88,
        3.88,
        5.68,
        5.88,
        6.66,
        8.88,
      ],

      order: null,
    }
  },
  methods: {
    show(data) {
      console.log(data)
      this.isShow = true
      this.order = data
      this.getRandomMoney()
    },
    // 获取随机金额
    getRandomMoney () {
      let number = Math.floor(Math.random() * 10 )
      this.form.money = this.moneys[number]
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {

        if (valid) {
          let query = {
            type: 'reward',
            money: btoa(this.form.money),
            from: this.$route.path,
          }

          if (this.order.order) {
            query.finals_id = this.order.id
            if (this.order.order) {
              query.order_id = this.order.order.id
            } else {
              this.$alert('该订单无法打赏！', '提示', {
                confirmButtonText: '确定',
                center: true,
                callback: action => {

                }
              })
              return
            }

          } else {
            query.order_id = this.order.id
          }
          this.$router.replace({
            name: 'payment',
            query: query
          })
        } else {
          return false;
        }
      })
    },
    close() {
      this.$refs['ruleForm'].resetFields()
      this.receiver_id = null
      this.isShow = false
    },

  }
}
</script>

<style lang='less' type='text/css'>
  .reward-dialog {
    .el-input {
      width: 70%;
    }
    .el-dialog {
      max-width: 700px;
    }
  }
</style>
